import React, { useEffect, useRef } from 'react';
import { useNavigate, useLocation, MemoryRouter as Router, } from 'react-router-dom';
import { UnorderedListOutline, UserOutline, SearchOutline } from 'antd-mobile-icons';
import bem from '@/utils/bem';
import NavBar from '@/components/navbar/navbar';

const HomeNavbar = () => {
    const b = bem('navbar');
    const navigate = useNavigate();
    const handleClick = (path: string) => {
        navigate(path);
    }

    const headRef = useRef<HTMLDivElement>(null);
    const pannelRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const headDiv = headRef.current;
        if (!headDiv) {
            return;
        }
        const pannelDiv = pannelRef.current;
        if (!pannelDiv) {
            return;
        }
        const headHeight = headDiv.offsetHeight;
        pannelDiv.style.height = `${headHeight}px`;
    }, [pannelRef]);

    return (
        <>
            <div className='seal-home-search seal-top-fixed' ref={headRef}>
                <NavBar
                    left={
                        <UnorderedListOutline fontSize={24} />
                    }
                    leftOnClick={() => { handleClick('/'); }}
                    contentOnClick={() => { handleClick('/search'); }}
                    right={
                        <>
                            <UserOutline fontSize={24} />
                        </>
                    }
                />
            </div>

            <div className='seal-h' ref={pannelRef}></div>
        </>
    )
}

export default HomeNavbar